{% extends "base.html" %}

{% block title %}个人中心 - 英语词汇量估算工具{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-12">
        <div class="card mb-4">
            <div class="card-header">
                <h4 class="mb-0"><i class="fas fa-user me-2"></i>个人中心</h4>
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <i class="fas fa-user me-2"></i>个人信息
                                </h5>
                                <p><strong>用户名:</strong> {{ current_user.username }}</p>
                                <p><strong>邮箱:</strong> {{ current_user.email }}</p>
                                <p><strong>注册时间:</strong> {{ current_user.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <i class="fas fa-graduation-cap me-2"></i>英语成绩
                                </h5>
                                <div class="row">
                                    <div class="col-6">
                                        <p><strong>四级成绩:</strong></p>
                                        <span id="cet4Score" class="badge bg-primary fs-6">未设置</span>
                                    </div>
                                    <div class="col-6">
                                        <p><strong>六级成绩:</strong></p>
                                        <span id="cet6Score" class="badge bg-success fs-6">未设置</span>
                                    </div>
                                </div>
                                <button id="editScoresBtn" class="btn btn-sm btn-outline-primary mt-2">
                                    <i class="fas fa-edit me-1"></i>编辑成绩
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h5>测试统计</h5>
                        <p><strong>总测试次数:</strong> {{ results|length }}</p>
                        {% if results %}
                        <p><strong>最近测试:</strong> {{ results[0].created_at.strftime('%Y-%m-%d %H:%M') }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0"><i class="fas fa-history me-2"></i>测试历史</h4>
                <div>
                    <a href="{{ url_for('test') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus me-1"></i>新测试
                    </a>
                </div>
            </div>
            <div class="card-body">
                {% if results %}
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>测试时间</th>
                                <th>测试类型</th>
                                <th>估算词汇量</th>
                                <th>置信度</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for result in results %}
                            <tr>
                                <td>{{ result.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                                <td>
                                    {% if result.test_type == 'interactive' %}
                                        <span class="badge bg-primary">交互式</span>
                                    {% elif result.test_type == 'batch' %}
                                        <span class="badge bg-success">批处理</span>
                                    {% elif result.test_type == 'corpus' %}
                                        <span class="badge bg-warning">语料分析</span>
                                    {% endif %}
                                </td>
                                <td>{{ "{:,}".format(result.vocabulary_estimate) }}</td>
                                <td>{{ "%.1f"|format(result.confidence * 100) }}%</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-info view-details-btn" data-result-id="{{ result.id }}">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
                    <h5>暂无测试记录</h5>
                    <p class="text-muted">开始您的第一次词汇量测试吧！</p>
                    <a href="{{ url_for('test') }}" class="btn btn-primary">
                        <i class="fas fa-play me-2"></i>开始测试
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 详情模态框 -->
<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">测试详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detailContent">
                <!-- 详情内容将通过JavaScript加载 -->
            </div>
        </div>
    </div>
</div>

<!-- 成绩编辑模态框 -->
<div class="modal fade" id="editScoresModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i>编辑英语成绩
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="scoresForm">
                    <div class="mb-3">
                        <label for="cet4ScoreInput" class="form-label">四级成绩</label>
                        <input type="number" class="form-control" id="cet4ScoreInput" 
                               min="0" max="710" placeholder="请输入四级成绩 (0-710)">
                        <div class="form-text">如果未参加考试，请留空</div>
                    </div>
                    <div class="mb-3">
                        <label for="cet6ScoreInput" class="form-label">六级成绩</label>
                        <input type="number" class="form-control" id="cet6ScoreInput" 
                               min="0" max="710" placeholder="请输入六级成绩 (0-710)">
                        <div class="form-text">如果未参加考试，请留空</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveScoresBtn">
                    <i class="fas fa-save me-1"></i>保存
                </button>
            </div>
        </div>
    </div>
</div>

<div id="alertContainer"></div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 页面加载时获取用户成绩
    loadUserScores();
    
    // 编辑成绩按钮点击事件
    $('#editScoresBtn').click(function() {
        loadUserScoresForEdit();
        $('#editScoresModal').modal('show');
    });
    
    // 保存成绩按钮点击事件
    $('#saveScoresBtn').click(function() {
        saveUserScores();
    });
    
    // 加载用户成绩
    function loadUserScores() {
        $.ajax({
            url: '/api/get_user_scores',
            method: 'GET',
            success: function(response) {
                if (response.success) {
                    updateScoreDisplay(response.cet4_score, response.cet6_score);
                }
            },
            error: function() {
                showAlert('获取成绩信息失败', 'danger');
            }
        });
    }
    
    // 加载成绩到编辑表单
    function loadUserScoresForEdit() {
        $.ajax({
            url: '/api/get_user_scores',
            method: 'GET',
            success: function(response) {
                if (response.success) {
                    $('#cet4ScoreInput').val(response.cet4_score || '');
                    $('#cet6ScoreInput').val(response.cet6_score || '');
                }
            },
            error: function() {
                showAlert('获取成绩信息失败', 'danger');
            }
        });
    }
    
    // 保存用户成绩
    function saveUserScores() {
        const cet4Score = $('#cet4ScoreInput').val() ? parseInt($('#cet4ScoreInput').val()) : null;
        const cet6Score = $('#cet6ScoreInput').val() ? parseInt($('#cet6ScoreInput').val()) : null;
        
        // 验证成绩范围
        if (cet4Score !== null && (cet4Score < 0 || cet4Score > 710)) {
            showAlert('四级成绩必须在0-710之间', 'warning');
            return;
        }
        
        if (cet6Score !== null && (cet6Score < 0 || cet6Score > 710)) {
            showAlert('六级成绩必须在0-710之间', 'warning');
            return;
        }
        
        // 显示加载状态
        $('#saveScoresBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>保存中...');
        
        $.ajax({
            url: '/api/update_scores',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                cet4_score: cet4Score,
                cet6_score: cet6Score
            }),
            success: function(response) {
                if (response.success) {
                    updateScoreDisplay(response.cet4_score, response.cet6_score);
                    $('#editScoresModal').modal('hide');
                    showAlert(response.message, 'success');
                } else {
                    showAlert(response.message, 'danger');
                }
            },
            error: function() {
                showAlert('保存失败，请重试', 'danger');
            },
            complete: function() {
                $('#saveScoresBtn').prop('disabled', false).html('<i class="fas fa-save me-1"></i>保存');
            }
        });
    }
    
    // 更新成绩显示
    function updateScoreDisplay(cet4Score, cet6Score) {
        // 更新四级成绩显示
        if (cet4Score !== null) {
            $('#cet4Score').text(cet4Score).removeClass('bg-secondary').addClass('bg-primary');
        } else {
            $('#cet4Score').text('未设置').removeClass('bg-primary').addClass('bg-secondary');
        }
        
        // 更新六级成绩显示
        if (cet6Score !== null) {
            $('#cet6Score').text(cet6Score).removeClass('bg-secondary').addClass('bg-success');
        } else {
            $('#cet6Score').text('未设置').removeClass('bg-success').addClass('bg-secondary');
        }
    }
    
    // 显示提示信息
    function showAlert(message, type) {
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        $('#alertContainer').html(alertHtml);
    }
});
</script>
{% endblock %} 